<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <section id="gap"></section>
            <section id="nextplay">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-1"></div>
                        <div class="col-md-10">
                            <h1>Próximos Jogos</h1>
                            <div class="col-md-1"></div>
                            <p:messages autoUpdate="true" />
                            <ui:repeat value="#{managerListaJogos.jogos}" var="j">
                                <div class="box col-md-2">
                                    <div class="boxheader col-md-12">
                                        <div class="icon-loterys-min euromillions-min col-md-12"></div>
                                    </div>
                                    <div class="jackpot col-md-12">
                                        <h3>
                                            <span class="simbolo" style="float:left; position: absolute">R$</span>
                                            <h:outputText value="#{j.valorJackpot}">
                                                <f:convertNumber type="currency" currencySymbol="" />
                                            </h:outputText>
                                        </h3>
                                        <h4>Milhões</h4>
                                    </div>
                                    <div class="boxfooter jackpot col-md-12">
                                        <h5>
                                            <h:outputText value="#{j.dataExpiracao}">
                                                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" />
                                            </h:outputText>
                                        </h5>

                                        <form  method="post" action="jogar.xhtml">
                                            <input type="hidden" value="#{j.id}" name="jogo"></input>
                                            <button type="submit" class="button-brown">Jogar Agora</button>
                                        </form>

                                    </div>
                                </div>
                            </ui:repeat>
                        </div>
                    </div>
                </div>
            </section>

        </ui:define>
    </ui:composition>
</html>
